<template>
  <div class="basic-from" v-dialogDrag>
    <el-dialog
      custom-class="small-padding-dialog el-common-dialog"
      :close-on-click-modal="false"
      :title="title"
      :visible.sync="dialogVisible"
      :width="width"
      @close="handleClosed"
    >
      <el-form
        :model="formData"
        ref="form"
        class="form-wrap"
        style="padding-top:0px;"
        :rules="rules"
        label-width="120px"
      >
        <template v-for="item in popUpdata">
          <!-- <h2 v-if="item.type === 'header'" :class="item.class" :key="item.key">{{item.label}}   <el-button v-if="item.key === 'shenti'" @click="$emit('approve')"  type="primary">一键全"无/否/没有"</el-button></h2> -->
          <div v-if="item.type === 'header'" :class="item.class" :key="item.key">
            <div class="card-title full">{{item.label}}</div>
            <el-button
              v-if="item.key === 'shenti'"
              @click="$emit('approve')"
              type="primary"
            >一键全"无/否/没有"</el-button>
          </div>
          <el-form-item
            v-else
            :label="item.label"
            :prop="item.key"
            :key="item.key"
            :class="item.class"
            :label-width="item.labelwidth"
          >
            <!-- <h3 class="full" v-if="item.type === 'header'">基本信息</h3> -->

            <el-input
              v-model="item.value"
              :placeholder="item.placeholder || '请输入'"
              :disabled="item.disabled"
              :readonly="item.readonly || type === 'details'"
              v-if="item.type === 'input'"
            />

            <el-input
              v-model="item.value"
              type="number"
              :placeholder="item.placeholder || '请输入'"
              :disabled="item.disabled"
              :readonly="item.readonly || type === 'details'"
              v-if="item.type === 'inputNum'"
            />

            <!-- 字典选择框 -->
            <template v-else-if="item.type === 'dict'">
              <el-select
                clearable
                v-model="item.value"
                :disabled="item.disabled || type === 'details'"
                :multiple="item.multiple"
                :placeholder="item.placeholder || '请选择'"
              >
                <el-option
                  v-for="(item, index) in filterList(item.dictName)"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </template>

            <el-radio-group
              v-model="item.value"
              v-else-if="item.type === 'radio'"
              :disabled="item.disabled"
              :readonly="item.readonly || type === 'details'"
            >
              <el-radio
                :label="data.value"
                v-for="(data, index) in item.options"
                :key="index"
              >{{ data.label }}</el-radio>
            </el-radio-group>

            <el-input
              v-model="item.value"
              type="textarea"
              placeholder="请输入"
              :disabled="item.disabled"
              :readonly="item.readonly || type === 'details'"
              v-else-if="item.type === 'textarea'"
            />

            <el-date-picker
              v-model="item.value"
              :type="item.genre"
              :disabled="item.disabled"
              :readonly="item.readonly || type === 'details'"
              :placeholder="item.placeholder || '选择日期'"
              v-else-if="item.type === 'time'"
              :value-format="inputFormat(item.genre)"
            ></el-date-picker>

            <el-select
              clearable
              v-model="item.value"
              :placeholder="item.placeholder || '请选择'"
              :disabled="item.disabled || type === 'details'"
              filterable
              v-else-if="item.type === 'select'"
              :multiple="item.multiple"
            >
              <el-option
                v-for="data in item.options"
                :key="data.value"
                :label="data.label"
                :value="data.value"
              />
            </el-select>

            <el-input
              v-model="item.secondValue"
              :disabled="item.disabled"
              :readonly="item.readonly || type === 'details'"
              placeholder="请输入"
              v-if="item.label === '隔离类型' && item.value === 5"
            />

            <el-input
              v-model="item.extraObj.value"
              placeholder="请输入"
              v-else-if="item.extraObj && item.value == item.showValue"
            />

            <el-date-picker
              v-model="item.extraObj.extraObj.value"
              type="datetime"
              v-if="item.extraObj && item.extraObj.extraObj  && item.value == item.showValue"
              :value-format="inputFormat('datetime')"
            ></el-date-picker>
            <!-- <el-date-picker
            v-model="item.twoextraObj.value"
            :type="item.twoextraObj.type"
            placeholder="选择日期"
            :value-format="inputFormat(item.twoextraObj.datetime)"
            ></el-date-picker>-->
          </el-form-item>
        </template>
      </el-form>

      <slot name="custom"></slot>

      <div slot="footer">
        <el-button v-if="type === 'add'" type="primary" @click="save">提交</el-button>
        <el-button @click="dialogVisible = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
/**
 *  @param {string} label   // 表单名称
 *  @param {string} value   // 表单值
 *  @param {string} key   // 表单key值
 * @param {string} footerState   // 底部操作按钮  `
 *  @param {string} type   // 组件类型 input 输入框 select 下拉框  redio 单选框 time 时间  textarea 多文本输入框
 *  @param {Array} options   // 组件类型 select redio 数据
 */
import { getDict } from '@/utils';

export default {
  name: 'hotelDialog',
  inject: ['initList'],
  props: {
    // form表单数据
    popUpdata: {
      type: Array,
      default: () => {
        return [];
      },
    },
    title: {
      type: String,
      default: '查看',
    },
    width: {
      type: String,
      default: '50%',
    },
    footerState: {
      type: Boolean,
      default: true,
    },
    type: {
      type: String,
      default: 'add',
    },
  },
  data() {
    return {
      //弹窗开关
      dialogVisible: false,
      // 表单项
      formData: {},
      // 校验
      rules: {
        // initiator: [{ required: true, message: "上报人不能为空", trigger: "blur" }],
        // initiateTime: [{ required: true, message: "上报时间不能为空", trigger: "blur" }],
        // propertyName: [{ required: true, message: "物业名称不能为空", trigger: "blur" }],
        // problemDesc: [{ required: true, message: "问题描述不能为空", trigger: "blur" }],
      },
    };
  },
  computed: {},
  methods: {
    // 日期格式化
    inputFormat(value) {
      if (
        ![
          'date',
          'datetime',
          'daterange',
          'datetimerange',
          'year',
          'month',
        ].includes(value)
      )
        return '';
      switch (value) {
        case 'date':
          return 'yyyy-MM-dd';
        case 'daterange':
          return 'yyyy-MM-dd';
        case 'month':
          return 'MM';
        case 'year':
          return 'yyyy';
        default:
          return 'yyyy-MM-dd HH:mm:ss';
      }
    },
    filterList(name) {
      return getDict(name);
    },
    // 更改弹窗状态
    async changeVisible() {
      this.dialogVisible = !this.dialogVisible;
    },
    // 提交新增
    async save() {
      this.$emit('submit');
    },
    // 弹窗关闭还原
    handleClosed() {
      this.dialogVisible = false;
      this.$emit('close');
    },
  },
};
</script>

<style lang="scss" scoped>
.addDialog {
  /deep/ .el-date-editor--datetime {
    width: 100%;
  }
  .album {
    .el-col {
      margin-bottom: 20px;
    }
    .img {
      width: 100%;
      height: 200px;
    }
  }
}
</style>
